<template>
	<view class="bgColor" v-if="detail">
		<watermark></watermark>
		<view v-if="page_is_show">
			<view class="wxgroup-list">
				<view class="wxgroup-list-item" v-for="(v, i) in detail.user" @click="gofriend(v)" :key="i">
					<image class="wxgroup-list-img" :src="v.portrait" mode="aspectFill"></image>
					<text class="wxgroup-list-text">{{ v.nickName }}</text>
				</view>
				<view v-if="detail.invite_allow == 1 || detail.user_type == 'root' || detail.user_type == 'manage'" class="wxgroup-list-item" @click="qunAdd">
					<view class="wxgroup-list-icon"><view class="wxfont jia"></view></view>
				</view>
				<view v-if="detail.user_type == 'root' || detail.user_type == 'manage'" class="wxgroup-list-item" @click="qunless">
					<view class="wxgroup-list-icon"><view class="wxfont jian"></view></view>
				</view>
				<view v-if="detail.is_show_gengduo" @click="goGengduo()" class="see_gengduo">点击查看更多群成员</view>
			</view>
			<tool-list-wx :list="list3" @itemClick="itemClick3"></tool-list-wx>
			<tool-list-wx :list="list4" @itemClick="itemClick4"></tool-list-wx>
			<tool-list-wx v-if="detail.user_type == 'root' || detail.user_type == 'manage'" :list="list5" @itemClick="itemClick5"></tool-list-wx>
		</view>
		<view class="wxgroupInfo">
			<!-- <view class="xw-tool-list">
				<view class="xw-tool-list-content">
					<view class="xw-tool-item">
						<text class="xw-tool-text">消息免打扰</text>
						<switch color="#05C160" :checked="Baneddisturb" @change="switchChange($event, 'xxmdr')" style="transform:scale(0.75);" />
					</view>
				</view>
				<view class="xw-tool-list-content">
					<view class="xw-tool-item">
						<text class="xw-tool-text">置顶聊天</text>
						<switch color="#05C160" :checked="Banedtop" @change="switchChange($event, 'zdlt')" style="transform:scale(0.75);" />
					</view>
				</view>
				<view class="xw-tool-list-content">
					<view class="xw-tool-item">
						<text class="xw-tool-text">保存到通讯录</text>
						<switch color="#05C160" :checked="BanedkeepGroup" @change="switchChange($event, 'bcdtxl')" style="transform:scale(0.75);" />
					</view>
				</view>
			</view> -->
			<view class="xw-tool-list">
				<view class="xw-tool-list-content" @click="qingchu">
					<view class="xw-tool-btn-item"><view class="xw-tool-btn-text" style="color: #FF5A5F;">清空群消息</view></view>
				</view>
				<!-- <view class="xw-tool-list-content" v-if="detail.user_type == 'root' || detail.user_type == 'manage'" @click="jiesan">
					<view class="xw-tool-btn-item"><view class="xw-tool-btn-text" style="color: #FF5A5F;">解散该群</view></view>
				</view> -->
				<view class="xw-tool-list-content" v-if="page_is_show && detail.user_type != 'root'" @click="quitqun">
					<view class="xw-tool-btn-item"><view class="xw-tool-btn-text" style="color: #FF5A5F;">删除并退出</view></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import detailVue from '../personInfo/detail.vue';
export default {
	data() {
		return {
			page_is_show: false,
			detail: {
				set: {
					top: 'N',
					keepGroup: 'N',
					disturb: 'N'
				},
				group: {
					notice: ''
				},
				user: []
			}
		};
	},
	computed: {
		list3() {
			return [
				{
					title: '群聊名称',
					path: '#',
					else: [
						{
							type: 'text',
							content: this.detail.name
						}
					]
				},
				{
					title: '群聊介绍',
					path: '#',
					else: [
						{
							type: 'text',
							content: this.detail.content ? this.detail.content : ''
						}
					]
				},
				{
					title: '群聊公告',
					path: '#',
					else: [
						{
							type: 'text',
							content: this.detail.notice ? this.detail.notice : ''
						}
					]
				}
				// {
				// 	title: '群二维码',
				// 	path: '#',
				// 	else: [
				// 		{
				// 			type: 'img',
				// 			content: '../../static/wx/t05.png'
				// 		}
				// 	]
				// },
			];
		},
		list4() {
			return [
				{
					title: '我在群里的昵称',
					path: '#',
					else: [
						{
							type: 'text',
							content: this.detail.my_group_nickname ? this.detail.my_group_nickname : ''
						}
					]
				}
			];
		},
		list5() {
			return [
				{
					title: '群管理',
					path: '#'
				}
			];
		},
		Banedtop() {
			return this.detail.top == 'Y' ? true : false;
		},
		BanedkeepGroup() {
			return this.detail.keepGroup == 'Y' ? true : false;
		},
		Baneddisturb() {
			return this.detail.disturb == 'Y' ? true : false;
		}
	},
	onLoad(e) {
		this.param = e.param;
	},
	onShow() {
		this.getInfo(this.param);
	},
	methods: {
		qunAdd() {
			uni.navigateTo({
				url: this.$fc.get_package_name()+'groupInfo/qunAdd?groupId=' + this.detail.groupId
			});
		},
		qunless() {
			uni.navigateTo({
				url: this.$fc.get_package_name()+'groupInfo/qunless?groupId=' + this.detail.groupId
			});
		},
		jiesan() {
			// 解散群聊
			uni.showModal({
				title: '提示',
				content: '确认解散群聊吗？',
				success: res => {
					if (res.confirm) {
						var formData = {};
						formData = {
							groupId: this.detail.groupId
						};
						this.$http.request({
							url: '/group/removeGroup',
							method: 'POST',
							data: JSON.stringify(formData),
							success: res => {
								if (res.data.code == 200) {
                                    var key  = "GROUP"+this.detail.groupId;
                                    var conversation_id = this.$fc.getConversationId(this.detail.groupId,"GROUP");
									delete this.$store.state.chatlist[key]
									this.$store.dispatch('updateChatListInfoById',{
										userId: key,
										data: {}
									});
									this.$store.dispatch('updateChatById', {
										conversation_id: conversation_id,
										data: []
									});
                                    this.$fc.ToastBack('解散成功',2);
									
								}
							}
						});
					}
				}
			});
		},
		quitqun() {
			uni.showModal({
				title: '提示',
				content: '确认退出群聊吗？',
				success: res => {
					if (res.confirm) {
						var formData = {};
						formData = {
							groupId: this.detail.groupId
						};
						this.$http.request({
							url: '/group/logoutGroup',
							method: 'POST',
							data: JSON.stringify(formData),
							success: res => {
								if (res.data.code == 200) {
                                    var key  = "GROUP"+this.detail.groupId;
                                    var conversation_id = this.$fc.getConversationId(this.detail.groupId,"GROUP");
									delete this.$store.state.chatlist[key]
									this.$store.dispatch('updateChatListInfoById',{
										userId: key,
										data: {}
									});
                                    var conversation_id = this.$fc.getConversationId(this.detail.groupId,'GROUP')
									this.$store.dispatch('updateChatById', {
										conversation_id: conversation_id,
										data: []
									});
                                    this.$fc.ToastBack('退出成功',2);
								}
							}
						});
					}
				}
			});
		},
		qingchu() {
			uni.showModal({
				title: '提示',
				content: '确认清除群聊消息吗？',
				success: res => {
					if (res.confirm) {
						if(this.detail.groupId){
							var key  = "GROUP" + this.detail.groupId;
						}else{
							var key  = "GROUP" + this.param;
						}
                        var conversation_id = this.$fc.getConversationId(this.detail.groupId,"GROUP");
						delete this.$store.state.chatlist[key]
						this.$store.dispatch('updateChatListInfoById',{
							userId: key,
							data: {}
						});
						this.$store.dispatch('updateChatById', {
							conversation_id: conversation_id,
							data: []
						});
						this.$fc.clearMsgTime('group',this.detail.groupId,conversation_id);
                        this.$fc.ToastBack('群消息已清空',2);
					}
				}
			});
		},
		gofriend(e) {
			if(this.detail.is_add_firend == 1 || this.detail.user_type == 'root' || this.detail.user_type == 'manage'){
				var show_add = 'on';
			}else{
				var show_add = 'off';
			}
			uni.navigateTo({
				url: this.$fc.get_package_name()+'personInfo/detail?param=' + e.userId+'&source=7&show_add='+show_add
			});
		},
		switchChange(e, type) {
			var yn = e.detail.value ? 'Y' : 'N';
			var url, formData, ynText;
            var key  = "GROUP"+this.detail.groupId;
			switch (type) {
				case 'xxmdr':
					url = '/group/editDisturb';
					formData = {
						groupId: this.param,
						disturb: yn
					};
					ynText = e.detail.value ? '已静默消息' : '已取消静默消息';
					var data=JSON.parse(JSON.stringify(this.$store.state.chatlist[key]))
					var ynx = data.disturb=='N' ? 'Y' : 'N';
					data.disturb=ynx
					this.$store.dispatch('updateChatListInfoById', {
						userId: key,
						data: data
					})
					this.$store.dispatch('getChatList')
					break;
				case 'zdlt':
					url = '/group/editTop';
					formData = {
						groupId: this.param, //群组id
						top: yn
					};
					ynText = e.detail.value ? '已置顶' : '已取消置顶';
					var data=JSON.parse(JSON.stringify(this.$store.state.chatlist[key]))
					var ynx = data.top=='N' ? 'Y' : 'N';
					data.top=ynx
					this.$store.dispatch('updateChatListInfoById', {
						userId: key,
						data: data
					})
					this.$store.dispatch('getChatList')
					break;
				case 'bcdtxl':
					url = '/group/editKeepGroup';
					formData = {
						groupId: this.param, //群组id
						keepGroup: yn
					};
					ynText = e.detail.value ? '已保存' : '已移除';
					break;
				default:
					break;
			}
			this.$http.request({
				url: url,
				method: 'POST',
				data: JSON.stringify(formData),
				success: res => {
					if (res.data.code == 200) {
						// uni.showToast({
						// 	title: ynText,
						// 	icon: 'none'
						// });
					}
				}
			});
		},
		itemClick3(e, i) {
			switch (i) {
				case 0:
					if(this.detail.is_editname_root == 1){
						if(this.detail.user_type != 'root' && this.detail.user_type != 'manage'){
							uni.showToast({
								title: '当前群聊仅群主及管理员可修改群聊名称',
								icon: 'none'
							});
							return false;
						}
					}
					uni.navigateTo({
						url: 'editGroupName?groupId=' + this.detail.groupId + '&name=' + this.detail.name
					});
					break;
				case 1:
					if(this.detail.content){
						uni.navigateTo({
							url: 'editGroupContent?groupId=' + this.detail.groupId
						});
					}else{
						if(this.detail.user_type != 'root' && this.detail.user_type != 'manage'){
							uni.showToast({
								title: '当前群聊仅群主/群管理员可修改群聊介绍',
								icon: 'none'
							});
							return false;
						}
						uni.navigateTo({
							url: 'editGroupContent?groupId=' + this.detail.groupId
						});
					}
					break;
				case 2:
					if(this.detail.notice){
						uni.navigateTo({
							url: 'seeGroupNotice?groupId=' + this.detail.groupId
						});
					}else{
						if(this.detail.user_type != 'root' && this.detail.user_type != 'manage'){
							uni.showToast({
								title: '当前群聊仅群主及管理员可修改群聊公告',
								icon: 'none'
							});
							return false;
						}
						uni.navigateTo({
							url: 'editGroupNotice?groupId=' + this.detail.groupId + '&back_number=2'
						});
					}
					break;
				default:
					break;
			}
		},
		itemClick4(e, i) {
			switch (i) {
				case 0:
					uni.navigateTo({
						url: 'editGroupNickname?groupId=' + this.detail.groupId + '&nickname=' + this.detail.my_group_nickname
					});
					break;
				default:
					break;
			}
		},
		itemClick5(e, i) {
			switch (i) {
				case 0:
					uni.navigateTo({
						url: 'group_set?groupId=' + this.detail.groupId
					});
					break;
				default:
					break;
			}
		},
		goGengduo(){
			uni.navigateTo({
				url: 'group_member_list?groupId=' + this.detail.groupId + '&is_add_firend=' + this.detail.is_add_firend + '&user_type=' + this.detail.user_type
			});
		},
		getInfo(e) {
			//详情
			this.$http.request({
				url: '/group/getInfo/?id=' + e,
				success: res => {
					if (res.data.code == 200) {
						this.page_is_show = true;
						this.detail = res.data.data;
						uni.setNavigationBarTitle({
							title: '聊天信息(' + this.detail.sum_member + ')'
						});
					}else{
						this.page_is_show = false;
					}
				}
			});
		}
	}
};
</script>

<style scoped>
/* #ifdef APP-PLUS */
.bgColor {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #ededed;
	z-index: -1;
	overflow: auto;
}
/* #endif */
/* #ifdef H5 */
page {
	background: #ededed;
}
/* #endif */

.xw-tool-list {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	margin-bottom: 18rpx;
}

.xw-tool-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 26rpx 24rpx;
	border-bottom: 1px #eee solid;
}
.xw-tool-list-content:nth-last-child(1) .xw-tool-item {
	border: none;
}

.xw-tool-text {
	margin-right: auto;
}

.xw-tool-btn-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 34rpx 44rpx;
	border-bottom: 1px #eee solid;
	font-weight: bold;
	color: #5f698c;
}
.wxgroup-list {
	background-color: #fff;
	padding: 24rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: 24rpx;
}
.wxgroup-list-item {
	width: 20%;
	overflow: hidden;
	box-sizing: border-box;
	margin-top: 12rpx;
	margin-bottom: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.wxgroup-list-icon .wxfont {
	color: #999;
	font-size: 46rpx;
}
.wxgroup-list-img {
	width: 105rpx;
	height: 105rpx;
	border-radius: 12rpx;
}
.wxgroup-list-icon {
	display: flex;
	flex-direction: column;
	width: 105rpx;
	height: 105rpx;
	border-radius: 12rpx;
	align-items: center;
	justify-content: center;
	border: 1px #ddd dashed;
}
.wxgroup-list-text {
	text-align: center;
	width: 105rpx;
	font-size: 24rpx;
	color: #999;
	margin-top: 12rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.xw-tool-else .text {
	color: #666;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 520rpx;
}
.see_gengduo{
	margin-top: 30rpx;
	width: 100%;
	text-align: center;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 32rpx;
	color:#999;
}
</style>
